﻿@model Xuanren_FrontEnd.Model.Product
@{
    Layout = null;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="applicable-device" content="pc,mobile" />
    <title>产品详细页</title>
    <link href="~/static/css/bootstrap.css" rel="stylesheet" />
    <link href="~/static/css/glide.css" rel="stylesheet" />
    <link href="~/static/css/style.css" rel="stylesheet" />
    <link href="~/static/css/online.css" rel="stylesheet" />
    <script src="~/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="~/static/js/bootstrap.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.glide.js" type="text/javascript"></script>
    <script src="~/static/js/common.js" type="text/javascript"></script>
    <script src="~/static/js/online.js" type="text/javascript"></script>
</head>
<style>
    .cp-ul li {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #edf0f2
    }

    .cp-ul .cp-title {
        margin-bottom: 10px;
    }

    .right {
        position: absolute;
        right: 0;
        width: 50%;
    }

    .cp-title {
        font-size: 14px;
        color: #333;
        font-weight: 700;
    }

    .fu-title {
        display: block;
        margin-bottom: 10px;
        color: #333333;
    }

    .cp-li-left {
        color: #999;
    }
    .cndns-right {
        position: fixed;
        right: 1px;
        top: 50%;
        margin-top: -100px;
        z-index: 100;
    }
    .meau-car .cndns-right-btn {
        border-color: #ff6800;
        margin-bottom: 20px;
    }
    .cndns-right-btn {
        width: 48px;
        height: 48px;
        border: 1px solid #ddd;
        text-align: center;
        display: block;
        margin-bottom: 6px;
        position: relative;
        background-color: #fff;
    }
    .meau-car .cndns-right-btn span {
        color: #ff6800;
    }
    .cndns-right-btn span {
        color: #ff6800;
        font-size: 26px;
        line-height: 48px;
    }

    .glyphicon {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: "Glyphicons Halflings";
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .cndns-right-btn {
        width: 48px;
        height: 48px;
        border: 1px solid #ddd;
        text-align: center;
        display: block;
        margin-bottom: 6px;
        position: relative;
        background-color: #fff;
    }

    .meau-top .cndns-right-btn span {
        font-size: 12px;
        line-height: 12px;
        padding-top: 10px;
        display: block;
    }
</style>
<body>
    @Html.Action("Header", "Shared")
    <!-- 内容 -->
    <div class="container">
        <div class="row">

            <div class="col-xs-12 col-sm-8 col-md-9" id="rightBox">

                <div class="positionBox">
                    <div class="titleBar">
                        <h1>当前位置</h1>
                        <span></span>
                        <a href="index.html">首页</a> > <a href="product.html">产品中心</a>
                    </div>
                </div>

                <div class="col-sm-12 col-md-12 pad">

                    <div class="col-sm-12 col-md-6 pad">
                        <div class="detailGlide" style="max-width:600px; margin:0 auto">
                            <div class="slider">
                                <ul class="slider__wrapper">
                                    <!--商品图片-->
                                    <li data-responsive='' data-src='~/images/@Model.image' data-sub-html=''
                                        class='slider__item real'><a><img src='~/images/@Model.image'></a></li>
                                    <p hidden id="image">@Model.image</p>
                                </ul>
                            </div>
                            <div id="detailNav">
                            </div>
                        </div>
                        <script type="text/javascript">
                            var glide = $('.slider').glide({ navigationImg: true, navigation: "#detailNav" });
                        </script>
                    </div>


                    <div class="col-sm-12 col-md-6 pad">
                        <div class="detailTitle">
                            <p id="name">@Model.name</p>
                        </div>
                        <div class="detailParameter">
                            <ul style="line-height: 40px">
                                <li>
                                    编号：
                                    <span id="pid">@Model.id</span>
                                </li>
                                <li>品牌：@Model.brand</li>

                                <li>
                                    型号：
                                    <span>@Model.model</span>
                                </li>
                                <li>
                                    价格：
                                    <span id="price">@((float)Model.price)</span>
                                </li>
                                @if (Model.info != null)
                                {
                                    <li>产品介绍:&nbsp;@Model.info</li>
                                }
                                <li>上架时间：@Model.create_time.ToString()</li>
                            </ul>

                        </div>

                        <div class="detailUrl">
                            <button id="AddCart" type="button" href="#">加入购物车</button>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-12 pad">
                        <div class="detailTitleTxt">
                            详情
                        </div>
                        <div class="detailContent">
                            <ul class="cp-ul">
                                <div class="cp-title">商品参数：</div>
                                <li>
                                    <span class="cp-li-left">规格：</span>
                                    <span id="specification" class="right">@Model.specification</span>
                                </li>
                                @if (Model.packing != null)
                                {
                                    <div class="cp-title">包装：</div>
                                    <li>
                                        <span class="cp-li-left">包装单位：</span>
                                        <span class="right">@Model.packing</span>
                                    </li>
                                }

                                <div>
                                    <div class="cp-title">售后服务：</div>
                                <li>
                                    <span class="fu-title">安装政策：</span><br>
                                    <span>
                                        <span class="cp-li-left">上门安装服务</span>
                                        @if (Model.is_Installation == "0")
                                        {
                                            <span class="right">不提供</span>
                                        }
                                        else
                                        {
                                            <span class="right">提供</span>
                                        }
                                    </span>
                                </li>

                                <li>
                                    <span class="fu-title">保修政策：</span><br>
                                    <span>
                                        <span class="cp-li-left">保修服务</span>
                                        @if (Model.is_Warranty == "0")
                                        {
                                            <span class="right">不提供</span>
                                        }
                                        else
                                        {
                                            <span class="right">提供</span>
                                        }
                                    </span>
                                </li>

                                <li>
                                    <span class="fu-title">退换政策：</span><br>
                                    <span>
                                        <span class="cp-li-left">是否支持退货</span>
                                        @if (Model.is_ReturnOfGoods == "0")
                                        {
                                            <span class="right">不支持</span>
                                        }
                                        else
                                        {
                                            <span class="right">支持</span>
                                        }
                                    </span><br>

                                    <span>
                                        <span class="cp-li-left">退货条件</span>
                                        <span class="right">质量问题</span>
                                    </span><br>

                                    <span>
                                        <span class="cp-li-left">退货期限</span>
                                        <span class="right">7天（从终端签收时间开始计算）</span>
                                    </span>
                                </li>

                                <li>
                                    <span class="fu-title">换货政策：</span><br>
                                    <span>
                                        <span class="cp-li-left">是否支持换货</span>
                                        @if (Model.is_ExchangeOfGoods == "0")
                                        {
                                            <span class="right">不支持</span>
                                        }
                                        else
                                        {
                                            <span class="right">支持</span>
                                        }
                                    </span><br>

                                    <span>
                                        <span class="cp-li-left">换货条件</span>
                                        <span class="right">质量问题</span>
                                    </span><br>

                                    <span>
                                        <span class="cp-li-left">换货期限</span>
                                        <span class="right">7天（从终端签收时间开始计算）</span>
                                    </span>
                                </li>
                        </div>

                        </ul>
                    </div>
                </div>

            </div>

            <div class="cndns-right">
                <div class="cndns-right-meau meau-car">
                    <a href="/ShoppingCart/ShppingCartList" class="cndns-right-btn">
                        <span class="glyphicon glyphicon-shopping-cart"></span>
                    </a>
                </div>

                <div class="cndns-right-meau meau-top" id="top-back">
                    <a href="javascript:" class="cndns-right-btn" onclick="topBack()">
                        <span class="glyphicon glyphicon-menu-up"></span>
                        <i>向上</i>
                    </a>
                </div>
            </div>

        </div>

        <div class="col-xs-12 col-sm-4 col-md-3">

            <div class="navigationBox" id="classification">
                <div class="titleBar">
                    <h1>导航栏目</h1>
                    <span></span>
                </div>
                <div class="list">
                    <ul id="firstpane">
                        @foreach (Xuanren_FrontEnd.Model.Category item in ViewBag.ProductTypeList)
                        {
                            if (ViewBag.ProductTypeId == item.id)
                            {
                                <li><a class='selected' href='/Product/ProductList/@item.id'>@item.TypeName</a></li>
                            }
                            else
                            {
                                <li><a class='' href='/Product/ProductList/@item.id'>@item.TypeName</a></li>
                            }
                        }
                    </ul>
                </div>
            </div>

            @Html.Action("NavigationBar", "Shared")

        </div>


    </div>


    @Html.Action("Footer", "Shared")

    <script src="~/static/api/ShoppingCart.js" type="text/javascript"></script>
    <script type="text/javascript">
        function mShare() {
            $("#mShareBox").toggle();
            $("#serviceBox").hide();
        }

        if ($(".banner .slider__wrapper li").length == 0) {
            $(".banner").addClass("emptyBanner");
        }

        function showService() {
            $("#mShareBox").hide();
            $("#serviceBox").toggle();
        }

    </script>

    <script type="text/javascript">
        //置顶图标显示
        $('#top-back').hide()
        $(window).scroll(function () {
            if ($(this).scrollTop() > 350) {
                $("#top-back").fadeIn();
            }
            else {
                $("#top-back").fadeOut();
            }
        })
        //置顶事件
        function topBack() {
            $('body,html').animate({ scrollTop: 0 }, 300);
        }
    </script>
    
        <script>
            $("#AddCart").click(function () {
                //封装参数
                var map = new Map();
                map.set("name", $("#name").text());
                map.set("image", $("#image").text());
                map.set("pid", $("#pid").text());
                map.set("price", $("#price").text());
                map.set("specification", $("#specification").text());
    
                AddShoppingCart(map);
            });
        </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('.slider__wrapper').lightGallery({ selector: ".real" });
        });
    </script>

    <script src="~/static/js/picturefill.min.js"></script>

    <script src="~/static/js/lightgallery.js"></script>

    <script src="~/static/js/lg-fullscreen.js"></script>

    <script src="~/static/js/lg-thumbnail.js"></script>

    <script src="~/static/js/lg-video.js"></script>

    <script src="~/static/js/lg-autoplay.js"></script>

    <script src="~/static/js/lg-zoom.js"></script>

    <script src="~/static/js/lg-hash.js"></script>

    <script src="js/lg-pager.js"></script>
</body>
</html>

